<template>
  <!-- tree.setCheckedKeys([]) 这个是 tree内置的方法 因为默认选中和展开 他会累加 一般方法无法清除 所以要用内置的方法解决累加问题 -->
  <el-dialog title="分配权限" :visible.sync="isShow" @close="$refs.tree.setCheckedKeys([])">
    <el-tree ref="tree" check-strictly :data="list" show-checkbox :props="{label:'name',children:'children'}" default-expand-all node-key="id" :default-expanded-keys="['604f7df5f900be1850edb152']" :default-checked-keys="permIds" />
    <!-- 设置一个具名插槽 -->
    <template #footer>
      <el-button type="primary" @click="submit">确定</el-button>
      <el-button>取消</el-button>
    </template>
  </el-dialog>
</template>

<script>
/* 导入 根据ID获取角色详情*/
import { sysRoleId } from '@/api/setting'
import { sysPermission } from '@/api/permission'
import { sysRoleAssignPrem } from '@/api/setting'
/* 导入公共树形转换方法 */
import { changeData } from '@/utils/index'
export default {
  data() {
    return {
      isShow: false,
      list: [],
      permIds: [], // 存放的是默认选中的ID
      id: ''
    }
  },
  methods: {
    /* 发请求拿到所有数据 */
    async getData() {
      /* 为了防止他已经有了数据后 一打开就又发请求给个判断 */
      if (!this.list.length) {
        /* 在里面发请求 */
        const res = await sysPermission()
        /* console.log(res) */
        this.list = changeData(res.data, '0')
      }
    },
    async getRoleInfo(id) {
      /* 这里发请求根据ID获取角色详情 */
      const res = await sysRoleId(id)
      // console.log(res)
      this.permIds = res.data.permIds
      /* 将id值赋值给data中方便下面修改权限信息使用 */
      this.id = res.data.id
    },
    /* 这里是当点击确定的时候发送请求 修改权限信息  */
    async submit() {
      await sysRoleAssignPrem({
        /* 要传 id */
        id: this.id,
        /* 要传 被选中项 */
        permIds: this.$refs.tree.getCheckedKeys()
      })
      /* 修改成功后要提示修改成功 */
      this.$message.success('修改成功')
      /* 然后是关闭对话框 */
      this.isShow = false
    }

  }

}
</script>

<style>

</style>
